<template>
	<!-- 员工管理模块 -->
	<view class="work-container">
		<!-- 搜索框-->
		<uni-search-bar @confirm="handleQuery"  v-model="queryParams.staffCode" placeholder="员工编码"
			bgColor="#ffffff" >
		</uni-search-bar>
		<uni-group mode="card" v-for="(item, index) in staffList" :index="index" :key="index">
			<view class="code">
				<text style="font-size:18px">员工编码：{{item.staffCode}}</text>
				<uni-icons class="icon" type="right" size="15" color="#000000" @click="toDetails(item.staffId)">详情</uni-icons>
			</view>
			<hr/>
			<view class="message">
				<view> 员工名称：{{item.staffName}}</view>
				<!-- <view>员工类型：{{$dict.selectDictLabel('hmy_staff_type',item.staffType)}}</view> -->
				<view  v-if="item.staffType == 1">
					员工类型：{{$dict.selectDictLabel('hmy_staff_type', 1)}}
				</view>
				<view  v-else-if="item.staffType == 2">
					员工类型：{{$dict.selectDictLabel('hmy_staff_type', 2)}} 
				</view>
				<view  v-else-if="item.staffType == 3">
					员工类型：{{$dict.selectDictLabel('hmy_staff_type', 3)}} 
				</view>
				<view  v-else-if="item.staffType == 4">
					员工类型：{{$dict.selectDictLabel('hmy_staff_type', 4)}} 
				</view>
				<view  v-else-if="item.staffType == 5">
					员工类型：{{$dict.selectDictLabel('hmy_staff_type', 5)}} 
				</view>
				<view> 联系方式：{{item.staffPhone}}</view>
			</view> 
		</uni-group>
		<!-- 加载更多 -->
		<uni-load-more iconType="auto" :status="status"/>
		<!--  新增加号-->
		<uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical"
				@fabClick="fabClick" />
	</view>
</template>

<script>
	
import { listStaff,getStaff,addStaff,updateStaff,delStaff } from "@/api/hmy/staff";
export default {
  name: "Staff",
  dicts: ['hmy_staff_type'],
  data() {
    return {
	  //加号style设置
	  horizontal: 'right',
	  vertical: 'bottom',
	  pattern: {
		buttonColor: '#55aa7f',
	  },
	  status: 'more',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 员工表格数据
      staffList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        staffCode: undefined,
        staffName: undefined,
        staffType: undefined,

      },
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
	  //上拉加载
	  onReachBottom(){
	  	if (this.status != 'noMore'){
	  		this.queryParams.pageSize += 5;
	  		this.getList();
	    }else{
	  		this.status = 'noMore';
	  		return;
	  	}
	  		
	  },
      // 表单校验
      rules: {
        staffCode: [
          { required: true, message: "员工编码不能为空", trigger: "blur" },
          { validator:async (rules, values, callback) => {
              var staffCode = this.form.staffCode;
              if (staffCode != undefined){
                await selectByStaffCode(staffCode).then(response => {
                  if (response.data.length > 1) {
                    callback(new Error("已存在"))
                  }
                })
              }
            }, trigger: "blur"}
        ],
        staffName: [
          { required: true, message: "员工名称不能为空", trigger: "blur" }
        ],
        staffPhone: [
          { required: true, message: "联系方式不能为空", trigger: "blur" }
        ],
        staffType: [
          { required: true, message: "员工类型不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询角色列表 */
    getList() {
      uni.showLoading({
      	title:"加载中"
      })
      listStaff(this.queryParams).then(response => {
          this.staffList = response.rows;
          this.total = response.total;
          uni.hideLoading();
        }
      );
    },
	//加号 页面跳转（跳转到员工添加页面）
	fabClick() {
		this.$tab.navigateTo('/pages/hmy/staff/staffAdd');
	},
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
	//详情右箭头
	toDetails(e){
		this.$tab.navigateTo('/pages/hmy/staff/staffDetials?id='+e);
	}
  }
};
</script>
<style lang="scss">

  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100%;
    height: auto;
	background-color: #fcfcfc;
  }

  view {
    font-size: 16px;
    line-height: inherit;
  }
  /* #endif */
  .code{
	margin-bottom :5px;
  }
.icon{
	float:right;
	margin-right:10px;
	margin-top :5px;
  }
  .message{
	margin-top:5px;
	color: #989897;
	line-height: 25px;
  }
</style>
